import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {List} from './List.tsx';
import {
  IconButton,
  NumberInput,
  SelectInput,
  MultiSelectInput,
  TextInput,
  Locale,
  Button,
  Helper,
} from '../../components';
import {CloseIcon} from '../../icons';
import {Content, ListContextContainer} from '../../storybook/PreviewGallery';

<Meta title="Components/List" component={List} />

# List

## Usage

List allow users to analyze and manipulate data, it differs from Table component by the fact that there is no header.

## Playground

<Canvas>
  <Story name="Standard">
    <List>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">
          Pellentesque ultrices nibh ac magna lacinia, sit amet posuere libero eleifend.
        </List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Proin sed quam mattis, volutpat nisi a, rutrum elit.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Ut ac purus auctor, aliquam mi id, egestas ligula.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
      </List.Row>
    </List>
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Actions

<Canvas>
  <Story name="Actions">
    <List>
      <List.Row>
        <List.TitleCell width="auto">
          A real biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig text without action, it really important to show the
          component comportment.
        </List.TitleCell>
        <List.RemoveCell>
          <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
        </List.RemoveCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">
          A real biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig text with one action, it really important to show the
          component comportment.
        </List.TitleCell>
        <List.ActionCell>
          <Button>First action</Button>
        </List.ActionCell>
        <List.RemoveCell>
          <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
        </List.RemoveCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">
          A real biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig text with three action, it really important to show the
          component comportment.
        </List.TitleCell>
        <List.ActionCell>
          <Button>First action</Button>
          <Button>Second action</Button>
          <Button>Third action</Button>
        </List.ActionCell>
        <List.RemoveCell>
          <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
        </List.RemoveCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">
          A real biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig text with three action, it really important to show the
          component comportment.
        </List.TitleCell>
        <List.ActionCell>
          <Button>First action</Button>
          <Button>Second action</Button>
          <Button>Third action</Button>
        </List.ActionCell>
      </List.Row>
    </List>
  </Story>
</Canvas>

## Error

<Canvas>
  <Story name="Error">
    <List>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
        <List.RowHelpers>
          <Helper level="error">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
          </Helper>
        </List.RowHelpers>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">
          Pellentesque ultrices nibh ac magna lacinia, sit amet posuere libero eleifend.
        </List.TitleCell>
        <List.RowHelpers>
          <Helper level="info">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
          </Helper>
          <Helper level="error">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
          </Helper>
        </List.RowHelpers>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Proin sed quam mattis, volutpat nisi a, rutrum elit.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Ut ac purus auctor, aliquam mi id, egestas ligula.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
      </List.Row>
    </List>
  </Story>
</Canvas>

## Selected Row

<Canvas>
  <Story name="Selected">
    <List>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
      </List.Row>
      <List.Row isSelected>
        <List.TitleCell width="auto">
          Pellentesque ultrices nibh ac magna lacinia, sit amet posuere libero eleifend.
        </List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Proin sed quam mattis, volutpat nisi a, rutrum elit.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Ut ac purus auctor, aliquam mi id, egestas ligula.</List.TitleCell>
      </List.Row>
      <List.Row>
        <List.TitleCell width="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</List.TitleCell>
      </List.Row>
    </List>
  </Story>
</Canvas>

## Complex list

<Canvas>
  <Story name="Complex">
    {args => {
      return (
        <List>
          <List.Row>
            <List.TitleCell width="auto">Label</List.TitleCell>
            <List.Cell width={400}>
              <TextInput value="example" onChange={() => {}} />
            </List.Cell>
            <List.Cell width={380}>
              <ListContextContainer>
                <SelectInput value="ecommerce" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="ecommerce">Ecommerce</SelectInput.Option>
                </SelectInput>
                <SelectInput value="en_US" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="en_US">
                    <Locale code="en_US" />
                  </SelectInput.Option>
                </SelectInput>
              </ListContextContainer>
            </List.Cell>
            <List.RemoveCell>
              <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
            </List.RemoveCell>
          </List.Row>
          <List.Row isMultiline>
            <List.TitleCell width="auto">Description is very long</List.TitleCell>
            <List.Cell width={400}>
              <Content width={400} height={300}>
                Large content
              </Content>
            </List.Cell>
            <List.Cell width={380}>
              <ListContextContainer>
                <SelectInput value="ecommerce" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="ecommerce">Ecommerce</SelectInput.Option>
                </SelectInput>
                <SelectInput value="en_US" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="en_US">
                    <Locale code="en_US" />
                  </SelectInput.Option>
                </SelectInput>
              </ListContextContainer>
            </List.Cell>
            <List.RemoveCell>
              <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
            </List.RemoveCell>
          </List.Row>
          <List.Row>
            <List.TitleCell width="auto">Label</List.TitleCell>
            <List.Cell width={400}>
              <NumberInput value="12" onChange={() => {}} />
            </List.Cell>
            <List.Cell width={380}>
              <ListContextContainer>
                <SelectInput value="ecommerce" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="ecommerce">Ecommerce</SelectInput.Option>
                </SelectInput>
                <SelectInput value="en_US" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="en_US">
                    <Locale code="en_US" />
                  </SelectInput.Option>
                </SelectInput>
              </ListContextContainer>
            </List.Cell>
            <List.RemoveCell>
              <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
            </List.RemoveCell>
          </List.Row>
          <List.Row isMultiline>
            <List.TitleCell width="auto">Label</List.TitleCell>
            <List.Cell width={400}>
              <MultiSelectInput
                value={['red', 'green', 'blue', 'yellow', 'orange', 'cyan']}
                onChange={() => {}}
                emptyResultLabel=""
                removeLabel=""
              >
                <MultiSelectInput.Option value="red">Red</MultiSelectInput.Option>
                <MultiSelectInput.Option value="green">Green</MultiSelectInput.Option>
                <MultiSelectInput.Option value="blue">Blue</MultiSelectInput.Option>
                <MultiSelectInput.Option value="yellow">Yellow</MultiSelectInput.Option>
                <MultiSelectInput.Option value="orange">Orange</MultiSelectInput.Option>
                <MultiSelectInput.Option value="cyan">Cyan</MultiSelectInput.Option>
                <MultiSelectInput.Option value="purple">Purple</MultiSelectInput.Option>
              </MultiSelectInput>
            </List.Cell>
            <List.Cell width={380}>
              <ListContextContainer>
                <SelectInput value="append" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="append">Append</SelectInput.Option>
                  <SelectInput.Option value="replace">Replace</SelectInput.Option>
                </SelectInput>
                <SelectInput value="ecommerce" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="ecommerce">Ecommerce</SelectInput.Option>
                </SelectInput>
                <SelectInput value="en_US" clearable={false} emptyResultLabel="">
                  <SelectInput.Option value="en_US">
                    <Locale code="en_US" />
                  </SelectInput.Option>
                </SelectInput>
              </ListContextContainer>
            </List.Cell>
            <List.RemoveCell>
              <IconButton ghost="borderless" level="tertiary" icon={<CloseIcon />} title="" />
            </List.RemoveCell>
            <List.RowHelpers>
              <Helper level="info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
              </Helper>
              <Helper level="error">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.
              </Helper>
            </List.RowHelpers>
          </List.Row>
        </List>
      );
    }}
  </Story>
</Canvas>
